<template>
  <div>
    <div class="page">
      <div style="background:#fff;width:100%;height:50px;" >
        <div class="flexStartCenter iconBack" @click="onBack">
        <div style="margin-right:5px;height:18px">
          <svg-icon icon-class="svgBack" style="font-size:16px"></svg-icon>
        </div>
        <div>返回</div>
      </div>
      </div>
      <div class="pageBody">
        <div style="margin:0px 0px 20px 0px">
          <a-button type="primary" icon="plus" @click="onAdd">新建</a-button>
        </div>

        <!-- 表格 -->
        <div class="atable" style="margin-bottom:20px">
          <a-table :columns="columns" :data-source="data" :pagination="false">
            <span slot="progressStatus" slot-scope="progressStatus">
              <a-badge color="blue" v-if="progressStatus=='1'" text="启用" status="processing" />
              <a-badge color="#ccc" v-if="progressStatus=='0'" text="停用" />
            </span>

            <span slot="action" slot-scope="text, record">
              <a
                style="color:#1890FF;margin-right:20px"
                @click="onDetail(text, record)"
                v-if="text.progressStatus=='1'"
              >停用</a>
              <a
                style="color:#1890FF;margin-right:20px"
                @click="onDetail(text, record)"
                v-if="text.progressStatus=='0'"
              >启用</a>
              <a style="color:#1890FF;" @click="onSet(text, record)">空间配置</a>
            </span>
          </a-table>
        </div>
        <!-- 分页 -->
        <div class="pagination flexBetween">
          <div>共 {{total}} 条记录 第 {{current}} / {{this.configFun.pageNum(Math.ceil((total/pageSize)))}} 页</div>
          <div>
            <a-pagination
              :current="current"
              :page-size-options="pageSizeOptions"
              :total="this.configFun.pageNum(total)"
              show-size-changer
              :page-size="pageSize"
              @showSizeChange="onShowSizeChange"
              @change="pageChange"
              show-quick-jumper
            >
              <template slot="buildOptionText" slot-scope="props">
                <span>{{ props.value }}条/页</span>
                <!-- <span v-if="props.value === '40'">全部</span> -->
              </template>
            </a-pagination>
          </div>
        </div>
      </div>

      <!-- 对话框 -->
      <div class="amodal">
        <a-modal
          v-model="visible"
          :title="modelTitle"
          @ok="handleOk"
          :maskClosable="false"
          cancelText="取消"
          okText="确认"
          class="aModal"
          :centered="true"
        >
          <a-form-model ref="ruleForm" :model="form" v-if="visible" :rules="rules">
            <a-form-model-item ref="unit" label="单位" prop="unit">
              <a-select
                mode="multiple"
                placeholder="请选择"
                :default-value="[]"
                @change="handleChange"
                @popupScroll="popupScroll"
                show-search
                option-filter-prop="children"
                v-model="unitModel"
              >
                <a-select-option v-for="item in unit" :key="item.id">{{ item.value}}</a-select-option>
              </a-select>
            </a-form-model-item>

            <a-form-model-item ref="name" label="单位简称" prop="name">
              <a-input v-model="form.name" :maxLength="30" placeholder="请输入单位简称" />
            </a-form-model-item>
            <a-form-model-item ref="space" label="计量空间" prop="space">
              <a-input v-model="form.space" :maxLength="30" placeholder="请输入计量空间" />
            </a-form-model-item>
          </a-form-model>
        </a-modal>
      </div>
    </div>
  </div>
</template>

<script>
const columns = [
  { title: '单位名称', dataIndex: 'recordDate', key: 'recordDate' },
  { title: '单位简称', dataIndex: 'postName', key: 'postName', align: 'center' },
  { title: '管理账号', dataIndex: 'account', key: 'account', align: 'center' },
  { title: '空间使用', dataIndex: 'fullName', key: 'fullName', scopedSlots: { customRender: 'fullName' } },

  {
    title: '状态',
    dataIndex: 'progressStatus',
    key: 'progressStatus',
    scopedSlots: { customRender: 'progressStatus' },
    align: 'center'
  },
  {
    title: '操作',
    key: 'action',
    scopedSlots: { customRender: 'action' },
    align: 'center'
  }
]
const tabdata = [
  {
    key: '1',
    recordDate: '项目课堂',
    fullName: '31.2G/800G',
    account: '1',
    postName: '8',
    progressStatus: '1'
  },
  {
    key: '2',
    recordDate: 'A1标',
    account: '2',
    fullName: '31.2G/800G',
    postName: '8',
    progressStatus: '0'
  }
]
export default {
  data() {
    return {
      columns,
      data: tabdata,
      pageSizeOptions: ['5', '10', '20', '30', '40'],
      current: 1,
      pageSize: 10,
      total: 1,
      modelTitle: '新建单位',
      visible: false,
      unit: [
        { id: 1, value: 'aaa', labor: 'sss' },
        { id: 2, value: 'bbb', labor: 'vvv' }
      ],
      form: {
        name: '',
        unit: '',
        space: '100G'
      },
      unitModel: [],
      rules: {
        unit: [
          {
            required: true,
            message: '请选择单位',
            trigger: 'change'
          }
        ],
        name: [
          {
            required: true,
            message: '请输入单位简称',
            trigger: 'change'
          }
        ],
        space: [
          {
            required: true,
            message: '请输入单位空间',
            trigger: 'change'
          }
        ]
      }
    }
  },
  methods: {
    onShowSizeChange(current, pageSize) {
      // console.log(current, pageSize)
      this.current = 1
      this.pageSize = pageSize
      //   this.getTotal(pageSize, this.current)
      // this.getTable()
    },
    pageChange(current, pageSize) {
      this.current = current
      this.pageSize = pageSize
      //   this.getTotal(pageSize, this.current)
    },
    onDetail() {},
    //点击设置
    onSet() {
      this.$router.push({ path: '/projectService/accountConfig' })
    },
    //点击amodal确定
    handleOk() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          this.visible = false
        } else {
          return false
        }
      })
    },
    // 点击返回
    onBack(){
      this.$router.push({path:'/projectService/spaceManage'})
    },
    //点击新增
    onAdd() {
      this.visible = true
      this.form.unit = ''
      this.form.name = ''
      this.unitModel = []
    },
    //选择框
    handleChange(value) {
      this.form.unit = value
      this.form.name = 'GS-1'
    },
    popupScroll() {
      // console.log('popupScroll');
    }
  }
}
</script>

<style scoped>
.pageBody {
  background: #fff;
  margin: 20px;
  padding: 35px 20px 20px;
}
.iconBack{
  width: 55px;
  height:50px;
  margin-left:20px;
}
.iconBack:hover {
  color: #1890ff;
  cursor: pointer;
}
</style>